<template>
  <view class="popup-container" :style="{ bottom: show ? 0 : -popupDefaultHeight + 'px' }">
    <view class="popup-context">
      <swiper
        class="swiper-wrap"
        :current="current"
        :next-margin="margin"
        :circular="false"
        @change="swiperChange"
      >
        <template v-for="(item, index) in members" :key="index">
          <swiper-item :skip-hidden-item-layout="true">
            <view v-if="item" class="swiper-item">
              <MemberCardItem
                v-if="contactsType === ContactsTypeEnum.PERSON"
                type="swiper"
                :source-type="sourceType"
                :item="item"
                :fixedHeight="true"
              />
              <CompanyCardItem
                v-else
                :item="item"
                :fixedHeight="true"
                :source-type="sourceType"
                type="swiper"
              />
            </view>
          </swiper-item>
        </template>
        <swiper-item v-if="showMoreView" :skip-hidden-item-layout="true">
          <view class="swiper-item view-more" @click.stop="handleViewMore">
            <text class="ali-icon icon-refresh"></text>
            <text>继续看更多人脉</text>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { getCurrentInstance, type PropType, ref, watch } from 'vue';
  import type { MemberContactsVoList } from '@/api/contactsMap/types';
  import { propTypes } from '@/utils/propTypes';
  // import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import MemberCardItem from './MemberCardItem.vue';
  import { ContactsTypeEnum, SourceTypeEnum } from '@/enums/contactsEnum';
  import CompanyCardItem from './CompanyCardItem.vue';

  const props = defineProps({
    current: propTypes.number.def(0),
    show: propTypes.bool.def(false),
    showMoreView: propTypes.bool.def(false),
    contactsType: {
      type: Number as PropType<ContactsTypeEnum>,
      default: ContactsTypeEnum.PERSON,
    },
    sourceType: Number as PropType<SourceTypeEnum>,
    members: Array as PropType<MemberContactsVoList[]>,
    tabbarHeight: propTypes.string,
  });

  const emit = defineEmits(['swiperChange', 'update:current', 'loadMore']);

  const popupDefaultHeight = ref(312);

  const margin = ref('30px');

  function swiperChange(e: any) {
    const {
      detail: { current, currentItemId, source },
    } = e;
    if (!props.members) return;
    if (current > props.members?.length - 1) return;
    if (source === 'touch') {
      emit('update:current', current);
      emit('swiperChange', current);
    }
  }

  function handleViewMore() {
    emit('loadMore');
  }
</script>

<style scoped lang="scss">
  .popup-container {
    position: absolute;
    left: 0;
    bottom: -v-bind(popupDefaultHeight) px;
    z-index: 99;
    width: 100vw;
    transition: all 0.3s;
  }
  .popup-context {
    position: relative;
    width: 100vw;
    padding-top: 30rpx;

    .swiper-wrap {
      z-index: 9;
      height: 300rpx;
      .swiper-item {
        margin-left: 30rpx;
        border-radius: 40rpx;
        overflow: hidden;
      }
      .view-more {
        height: calc(100% - 30rpx);
        padding-bottom: 0;
        background-color: #fff;
        color: #2878ff;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .ali-icon {
          margin-right: 16rpx;
        }
      }
    }
  }
</style>
